<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>jsTile</title>

<script type="text/javascript" src="../js/jstile.js"></script>
<script type="text/javascript" src="../js/jstile.layer.js"></script>
<script type="text/javascript" src="../js/jstile.image.js"></script>
<script type="text/javascript" src="../js/jstile.sprite.js"></script>
<script type="text/javascript" src="../js/jstile.grid.js"></script>
<script type="text/javascript">
window.onload = function(){
	var grid = new jstile.Grid(15, 15, 16, 16, jstile.ORTHOGONAL),
	background = new jstile.Layer(grid.widthPx, grid.heightPx, 10),
	players = new jstile.Layer(grid.widthPx, grid.heightPx, 30),

	bloom = new jstile.Image('pics/bloom.gif', 16, 16),
	sand = new jstile.Image('pics/sand.gif', 16, 16),
	harvester = new jstile.Image('pics/harvester.gif', 40, 26, jstile.VERTICAL),
	harvesterSand = new jstile.Image('pics/harvesterSand.gif', 40, 26, jstile.VERTICAL, 2, 300),
	
	unit_0 = new jstile.Sprite(harvester, 20, 20, 10, 7),
	unitfeature_0 = new jstile.Sprite(harvesterSand, 0, 0, 11, 7, false, true),
	unit_1 = new jstile.Sprite(harvester, -10, -10, 20, 4),
	unitfeature_1 = new jstile.Sprite(harvesterSand, 0, 0, 1, 4, false, true);

	// create random tiles
	var tiles = [];
	for(var x = 0; x < grid.width; ++x) {
		for(var y = 0; y < grid.height; ++y) {
			var offset = grid.offsets[x][y];
			
			tiles.push(new jstile.Sprite(
				Math.round(Math.random()) ? sand : bloom,
				offset.left,
				offset.top,
				x+y
			));
		}
	}
	background.addSprite(tiles);
	
	unit_0.addChild(unitfeature_0);
	unit_1.addChild(unitfeature_1);
	
	players.addSprite([unit_0, unit_1]);

	background.init('background').start();
	players.init('players').start();

	setTimeout(function(){
		players.removeSprite(unit_1);
	}, 2000);
};
</script>
</head>
<body>
	<div style="position: absolute;" id="background"></div>
	<div style="position: absolute;" id="players"></div>
</body>
</html>